<template>
  <el-scrollbar style = "height: 80vh">
    <el-row v-infinite-scroll = "test1" infinite-scroll-distance = '1'>
      <!--左侧动态-->
      <el-col :span = "18">
        <div class = "column-container">
          <!--动态标题-->
          <el-row class = "title-container">
            <div class = "row-container al-center  ">
              <h2>动态</h2>
              <el-button class = "post-button">
                <i-edit theme = "outline" size = "21" fill = "#fff" :strokeWidth = "3" strokeLinejoin = "miter" />
                发动态
              </el-button>
            </div>
          </el-row>
          <!--动态列表-->
          <el-row style = "padding: 40px 30px">
            <post-item v-for = "item in 5" :key = "item"></post-item>
          </el-row>
        </div>
      </el-col>
      <!--右侧个人信息-->
      <el-col style = "border-left: 1px solid #efefef" :span = "6">
        <!--我的信息-->
        <el-row style = "padding: 20px ; background-color:#f4f4f6;">
          <el-col class = "column-container" :span = "24">
            <div class = "row-container" style = "padding-bottom:10px   ">
              <el-avatar :size = "70" :src = "logo" />
              <div class = "column-container" style = "padding:0 5px  ">
                <span class = "user-name">你的名字</span>
                <span>你的简介</span>
              </div>
            </div>
            <!--动态，关注，粉丝-->
            <base-fans-numbers :fans = "123" :post = "321" :focus = "111" />
          </el-col>
        </el-row>
        <!--热门话题-->
        <el-row style = "padding: 20px; ">
          <el-col :span = "24">
            <h5>热门话题(施工中......)</h5>
          </el-col>
        </el-row>
        <el-row style = "padding: 20px; ">
          <el-col :span = "24">
            <h5>认识的人(施工中......)</h5>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script setup>
import logo from '@/assets/logo.png'
import PostItem from "@/views/FriendsPost/PostItem";
import BaseFansNumbers from "@/components/Base/BaseFansNumbers";

function test1() {
  console.log('friendsPost')
}
</script>

<style lang = "less" scoped>
.post-button {
  margin: 0 10px;
  border-radius: 20px;
  color: #fff;
  font-size: 18px;
  background-color: var(--slider-button-color);

  &:hover {
    color: #fff;
    background-color: rgba(139, 139, 139, 0.62);
  }
}

.title-container {
  width: 56vw;
  position: fixed;
  z-index: 1;
  padding: 10px 30px;
  background-color: #fff;
}

span {
  font-size: 12px;
  color: #808080;
}


</style>